<template>
	<view class="page">
		<!-- 导航区域 -->
		<u-navbar title="申请代理" :autoBack="true" leftText="返回" bgColor="rgba(255,255,255,0)"
			left-icon-color="#fff"></u-navbar>

		<div class="main">
			<img id="fenxiao_bg" src="../../static/images/fenxiao_bg.png"> </img>

			<div id="tab-bg-parent">
				<div class="tab-bg">

					<p class="tab-left-select" id="tab-left" @click="proxyQuanyi">代理权益</p>
					<p class="tab-right-unselect" id="tab-right" @click="LHCSR">联合创始人</p>

				</div>
				<div style="background-color: white; height: 30rpx;width: 100%;margin-top: -30rpx;">

				</div>

				<div style="width: 100%;border-bottom-left-radius: 30rpx;border-bot tom-right-radius: 30rpx;
					background-color: white;padding-top: 42rpx;padding-bottom: 42rpx;">

					<ul style="margin-left: 40rpx;margin-right: 40rpx;display: flex;">
						<li class="select-combo-bg">
							<div>
								<h1>套餐一</h1>
								<div style="display: flex;">
									<div style="width:120rpx ;">
										<p>能量门：</p>
										<p>命运之轮：</p>
									</div>
									<div>
										<p>80个</p>
										<p>3颗&nbsp;&nbsp;1个</p>
										<p>3颗&nbsp;&nbsp;1个</p>
										<p>3颗&nbsp;&nbsp;1个</p>
									</div>
								</div>
								<div style="margin-top: 10rpx;">
									<span style="font-size: 24rpx;color:#FF4745 ;font-weight: 700;">¥</span>
									<span id="combo-money">55555</span>
								</div>
							</div>
						</li>

						<li class="unselect-combo-bg" style="margin-left: 30rpx;">
							<div>
								<h1>套餐二</h1>
								<div style="display: flex;">
									<div style="width:120rpx ;">
										<p>能量门：</p>
										<p>命运之轮：</p>
									</div>
									<div>
										<p>80个</p>
										<p>3颗&nbsp;&nbsp;1个</p>
										<p>3颗&nbsp;&nbsp;1个</p>
										<p>3颗&nbsp;&nbsp;1个</p>
									</div>
								</div>
								<div style="margin-top: 10rpx;">
									<span style="font-size: 24rpx;color:#FF4745 ;font-weight: 700;">¥</span>
									<span id="combo-money">55555</span>
								</div>
							</div>
						</li>
					</ul>
				</div>


				<div id="quanyi-introduce-bg">

					<div id="quanyi-introduce">
						<h1>
							代理 · 专享权益
						</h1>

						<ul>
							<li class="quanyi-list-style">
								<div style="display: flex;align-items: center;">

									<img src="../../static/icon/ic_quanyi_flag.png" alt="" />
									<div id="qianyi-info-item">
										<p id="quanyi-title">专享门票</p>
										<p id="quanti-intro">情归何处门票1张、688/1次、富贵之门/1次</p>
									</div>
								</div>

								<img src="../../static/icon/ic_quanyi1.png" alt="" />
							</li>
							<li class="quanyi-list-style">
								<div style="display: flex;align-items: center;">

									<img src="../../static/icon/ic_quanyi_flag.png" alt="" />
									<div id="qianyi-info-item">
										<p id="quanyi-title">专享门票</p>
										<p id="quanti-intro">情归何处门票1张、688/1次、富贵之门/1次</p>
									</div>
								</div>

								<img src="../../static/icon/ic_quanyi1.png" alt="" />
							</li>

						</ul>
					</div>

				</div>

				<div style="display: flex;align-items: center;justify-content: center;margin-top: 28rpx;">
					<label for="checkbox-id" class="checkbox-label" style="display: flex;">
						<input type="checkbox" id="checkbox-id" class="checkbox-input" />
						<span class="checkbox-style"></span>
					</label>
					<p style="color: #2e2e2e;font-size: 28rpx;margin-left: 10rpx;">同意并签署协议《妙缘能量珠宝》</p>
				</div>

				<u-button id="join" text="立即加入"></u-button>
			</div>




		</div>
	</view>
</template>

<script>
	export default {
		methods: {
			//代理权益
			proxyQuanyi() {
				var tabLeft = document.getElementById('tab-left');
				tabLeft.classList = '';
				tabLeft.classList.add("tab-left-select");

				var tabRight = document.getElementById('tab-right');
				tabRight.classList = '';
				tabRight.classList.add("tab-right-unselect");
			},
			//联合创始人
			LHCSR() {
				var tabLeft = document.getElementById('tab-left');
				tabLeft.classList = '';
				tabLeft.classList.add("tab-left-unselect");

				var tabRight = document.getElementById('tab-right');
				tabRight.classList = '';
				tabRight.classList.add("tab-right-select");
			}
		}
	}
</script>

<style lang="scss">
	li {
		list-style-type: none;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	.main {
		width: 750rpx;
		height: 1570rpx;
		background-color: #f5f5f5;
		position: relative;
	}

	#fenxiao_bg {
		width: 750rpx;
		height: 580rpx;
	}

	#tab-bg-parent {
		position: absolute;
		top: 550rpx;
		width: 89.5%;
		margin-left: 40rpx;
		margin-top: -80rpx;
		border-radius: 10rpx;
		background-color: transparent;
	}

	.tab-bg {}

	.tab-left-select {
		display: inline-block;
		width: 50%;
		font-size: 30rpx;
		color: #333;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		background-color: white;
		text-align: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		font-weight: 500;
	}

	.tab-left-unselect {
		display: inline-block;
		width: 50%;
		font-size: 28rpx;
		color: #696969;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 0rpx;
		border-bottom-right-radius: 20rpx;
		background-color: #f5f5f5;
		text-align: center;
		padding-top: 12rpx;
		padding-bottom: 20rpx;
		font-weight: 400;
	}

	.tab-right-select {
		display: inline-block;
		width: 50%;
		font-size: 30rpx;
		color: #333;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
		background-color: white;
		text-align: center;
		align-items: center;
		justify-content: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		font-weight: 500;
	}


	.tab-right-unselect {
		display: inline-block;
		width: 50%;
		font-size: 28rpx;
		color: #696969;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 20rpx;
		background-color: #f5f5f5;
		text-align: center;
		align-items: center;
		justify-content: center;
		padding-top: 12rpx;
		padding-bottom: 20rpx;
		font-weight: 400;
	}


	.select-combo-bg {
		width: 36%;
		border-radius: 30rpx;
		border: 4rpx solid #D4A352;
		padding-left: 30rpx;
		padding-top: 40rpx;
		padding-right: 30rpx;
		padding-bottom: 40rpx;
	}

	.select-combo-bg h1 {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 600;
		font-size: 36rpx;
		color: #2E2E2E;
		line-height: 52rpx;
		text-align: left;
		font-style: normal;
	}

	.select-combo-bg p {
		color: #696969;
		font-size: 24rpx;
		font-weight: 400;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		margin-top: 16rpx;
	}

	#combo-money {
		width: 120rpx;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: bold;
		font-size: 36rpx;
		color: #FF4745;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.unselect-combo-bg {
		width: 36%;
		border-radius: 30rpx;
		border: 2rpx solid #e0e0e0;
		padding-left: 30rpx;
		padding-top: 40rpx;
		padding-right: 30rpx;
		padding-bottom: 40rpx;
	}

	.unselect-combo-bg h1 {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 600;
		font-size: 36rpx;
		color: #2E2E2E;
		line-height: 52rpx;
		text-align: left;
		font-style: normal;
	}

	.unselect-combo-bg p {
		color: #696969;
		font-size: 24rpx;
		font-weight: 400;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		margin-top: 16rpx;
	}

	#quanyi-introduce-bg {
		width: 100%;
		background-color: white;
		border-radius: 30rpx;
		margin-top: 30rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}

	#quanyi-introduce {
		margin-left: 40rpx;
		margin-right: 40rpx;
	}

	#quanyi-introduce h1 {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 700;
		font-size: 30rpx;
		color: #3C2913;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		margin-bottom: 10rpx;
	}

	.quanyi-list-style {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#qianyi-info-item {
		margin-left: 34rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	#quanyi-title {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 500;
		font-size: 28rpx;
		color: #2E2E2E;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	#quanyi-introduce {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 400;
		font-size: 20rpx;
		color: #696969;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.checkbox-input {
		display: none;
		/* 隐藏原生的checkbox */
	}

	.checkbox-style {
		display: inline-block;
		width: 28rpx;
		/* 设置图片的宽度 */
		height: 28rpx;
		/* 设置图片的高度 */
		background-image: url('../../static/icon/ic_uncheck.jpg');
		/* 默认未选中状态的图片 */
		background-size: cover;
		/* 背景图片覆盖整个元素 */
	}

	.checkbox-input:checked+.checkbox-style {
		background-image: url('../../static/icon/ic_checked.jpg');
		/* 选中状态下的图片 */
	}

	.checkbox-label {
		cursor: pointer;
		/* 让标签具有指针光标，点击时更明显 */
	}

	#join {
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		background-color: #541A5F;
		margin-top: 28rpx;
		height: 90rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: white;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}
</style>